* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
}
html {
  font-size: 100px;
}
#root {
  font-size: 0.14rem;
}
html,
body,
#root,
.appBox {
  width: 100%;
  height: 100%;
}
.appBox {
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 0.5rem;
    background: red;
    display: flex;
    justify-content: center;
    ul {
      width: 200px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      li {
        padding: 3px 5px;
      }
      .on {
        background: #fff;
      }
    }
  }
  main {
    flex: 1;
    background: #f1f1f1;
    overflow: hidden;
    ul {
      width: 100%;
      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 1.1rem;
        .rv-image {
          width: 70px;
          height: 100px;
          margin: 0 5px;
          img {
            width: 70px;
            height: 100px;
          }
        }
        p {
          width: 200px;
          font-size: 13px;
          line-height: 20px;
        }
        .text {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        div {
          width: 100%;
        }
        button {
          float: right;
          margin-right: 15px;
        }
        h4 {
          margin: 10px 0;
          font-size: 18px;
          span {
            font-size: 12px;
            display: inline-block;
            margin: 3px 5px;
          }
        }
      }
    }
  }
  footer {
    width: 100%;
    height: 0.5rem;
    background: #ccc;
  }
}
